<template>
<uni-shadow-root class="partials-space_list-index"><view class="container" :style="SpaceshowWay==1? 'height:100%':''">
    <block v-if="SpaceshowWay == 2">
     <view class="space_page_container2" :style="'height:'+(SpaceshowWay==1? '100%':'')+';margin-top:'+(limitState!=0?'':'80rpx')">
        <block v-if="(!! spaceData)">
          <view v-for="(result,index) in (spaceData)" class="space_item" v-if="limitState!=0?index<data.jsonData.count:'ture'" :data-link="'space_detail.html?spaceId='+(result.id)" @click="tolinkUrl">
            <view class="space_item_head">
              <image :src="(result.icon)+'?x-oss-process=style/preview'" class="space_item_logo"></image>
              <text class="space_item_name">{{result.name}}</text>
            </view>
            <view class="space_item_first_img">
              <image class="space_item_banner" mode="aspectFill" :src="result.firstImage"></image>
            </view>
            <view class="space_item_location">
              <view class="space_item_location_left">
                <image src="https://image1.sansancloud.com/gongyixiangmu/2020_1/7/15/19/5_295.jpg?x-oss-process=style/preview_120" class="space_item_addr_icon"></image>
                <view class="space_item_place">
                  <text class="space_item_addr">{{result.province}}{{result.city}}{{result.area}}{{result.address}}</text>
                  <view class="space_item_distance">
                    <text>距离你</text>
                    <text class="distance" :style="'color:'+(setting.platformSetting.defaultColor)+';border: 1rpx solid '+(setting.platformSetting.defaultColor)">{{publicFun.toFix(result.distance)}}</text>
                    <text>KM</text>
                  </view>
                </view>
              </view>
              <view class="space_navigation" @click.stop.prevent="toNavigate" :data-info="publicFun.toStringFun(result)" :style="'background:'+(setting.platformSetting.defaultColor)">
                <image src="https://image1.sansancloud.com/xianhua/2018_9/13/21/22/3_772.jpg" class="space_navigation_icon"></image>
                <text class="space_navigation_text">导航</text>
              </view>
            </view>
          </view>
        </block>
        <block v-else>
          <view class="nospace">
            <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120"></image>
            <text>没有相关商品</text>
          </view>
        </block>
      </view>
    </block>
    <block v-if="SpaceshowWay == 1">
     <scroll-view class="space_page_container2" :style="'height:'+(SpaceshowWay==1? '100%':'')">
          <map class="mapItem" id="map" :longitude="localPoint.longitude" :latitude="localPoint.latitude" scale="14" @controltap="controltap" :markers="markers" @markertap="markertap" @regionchange="regionchange" show-location="true" style="width: 100%; height: 100%;" @click="hiddenProInfo">
            <cover-view class="play">
               <cover-image class="img" src="https://image1.sansancloud.com/xianhua/2019_12/12/15/2/5_950.jpg?x-oss-process=style/preview_120" style="width:80rpx;height:80rpx;"></cover-image>
            </cover-view>
          </map>
          <cover-view class="bottom_tap">
            <cover-view class="return_index">
              <cover-image src="https://image1.sansancloud.com/xianhua/2018_9/13/16/50/14_226.jpg" class="return_index_img" @click="toIndex"></cover-image>
            </cover-view>
            <cover-view class="location">
              <cover-image src="https://image1.sansancloud.com/xianhua/2018_9/13/16/50/14_232.jpg" class="location_img" @click="clickcontrol"></cover-image>
            </cover-view>
          </cover-view>
          <cover-view class="space_data" v-if="spaceDetail!=null">
            <cover-view class="space_info">
              <cover-image class="space_info_left" :src="spaceDetail.spaceInfo.imagePath+'?x-oss-process=style/preview_120'"></cover-image>
              <cover-view class="space_info_center">
                <cover-view class="space_info_name">{{spaceDetail.spaceInfo.name}}</cover-view>
                <cover-view class="space_info_service_time">
                  <cover-image class="space_info_service_time_img" src="https://image1.sansancloud.com/santigongxiang/2018_10/10/18/22/0_933.jpg"></cover-image>
                  <cover-view class="space_info_service_time_value">{{spaceDetail.spaceInfo.categoryName}}</cover-view>
                </cover-view>
                <cover-view class="space_info_service_addr">
                  <cover-image class="space_info_service_addr_img" src="https://image1.sansancloud.com/xianhua/2018_9/13/17/57/21_219.jpg"></cover-image>
                  <cover-view class="space_info_service_addr_value" style="width:96%; word-break: break-all;text-overflow: ellipsis;white-space: nowrap;">{{spaceDetail.spaceInfo.location}}</cover-view>
                </cover-view>
              </cover-view>
              <cover-view class="space_info_right" @click="toSpaceDetail" :data-info="publicFun.toString(spaceDetail.spaceInfo)">
                <cover-view class="line"></cover-view>
                <cover-image src="https://image1.sansancloud.com/xianhua/2018_9/13/20/11/36_801.jpg?x-oss-process=style/preview_120" class="navigation"></cover-image>
              </cover-view>
            </cover-view>
          </cover-view>
      </scroll-view>
    </block>
</view></uni-shadow-root>
</template>
<wxs src="../../public/publicFun.wxs" module="publicFun"></wxs>
<script>

global['__wxRoute'] = 'partials/space_list/index'
const app = getApp();
Component({
  properties: {
    receiveData: {
      type: Object,
      value: 'default value',
    },
    params: {
      type: Object,
      value: {},
    },
  },
  data: {
    setting: null, 
    spaceData: [], 
    sysWidth: 320,
    positionTab:'',
    SpaceshowWay: 2, 
    localPoint: { longitude: '0', latitude:'0'},
    spaceDetail: null,
    limitState: 0,
    markers: [{
      iconPath: "../../images/icon/mapItem.png",
      id: 0,
      width:20,
      heigth:20,
      latitude: 26.060701172100124,
      longitude: 119.30130341796878,
    }],
    /* 全部参数 */
    params: {
      name: "",
      addressStr: "",
      page: 1,
      latitude: '0',
      longitude: '0',
      spaceTypeName:"",
    },
    listPage: {
      page: 1,
      pageSize: 0,
      totalSize: 0,
      curpage: 1
    },
  },
  ready: function () {
    let that = this;
    console.log("====space-data=====", that.data.receiveData);
    if (that.data.receiveData.jsonData&&that.data.receiveData.jsonData.count){
      that.setData({ limitState: that.data.receiveData.jsonData.count})
    }
    console.log("====space-limitState=====", that.data.limitState)
    console.log("====space-params=====", that.data.params)
    let options = that.data.receiveData;
    that.initSetting();
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        console.log(res)
        that.data.localPoint.latitude = res.latitude
        that.data.localPoint.longitude = res.longitude
        that.data.params.latitude = res.latitude
        that.data.params.longitude = res.longitude
        console.log("options", options)
        if (options.spaceTypeId) {
          that.setData({ positionTab: options.spaceTypeId })
          options.categoryId = options.spaceTypeId
          that.bindTypeItem(options.spaceTypeId)
        }
        if (!!options.forceSearch && options.forceSearch == 2) {
          that.setData({ SpaceshowWay: 2 })
        } else {
          that.setData({ SpaceshowWay: 2 })
        }
        for (let i in options) {
          for (let j in that.data.params) {
            if (i.toLowerCase() == j.toLowerCase()) { that.data.params[j] = options[i] }
          }
        }
        that.setData({
          params: that.data.params,
          localPoint: that.data.localPoint
        })
        console.log(that.data.params)
        that.getData(that.data.params);
      }
    })
  },
  methods: {
    //获取产品分类
    getSpaceType: function (parentCategoryId,categoryId,callback){
      var customIndex = app.globalData.AddClientUrl("/wx_get_categories_only_by_parent.html", { categoryId: parentCategoryId})
      app.globalData.showToastLoading('loading', true)
      var that = this
      wx.request({
        url: customIndex.url,
        header: app.globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log("getSpaceType",res.data)
          if (res.data.errcode==0){
            that.setData({ spaceType: res.data.relateObj })
          }else{
            that.setData({ spaceType: that.data.spaceType })
          }
          that.data.spaceType.unshift({ id: categoryId || parentCategoryId,name:"全部"})
          for (let i = 0; i < that.data.spaceType.length; i++) {
            that.data.spaceType[i].colorAtive = '#888';
          }
          that.data.spaceType[0].colorAtive = that.data.setting.platformSetting.defaultColor;
          that.data.spaceType[0].active = true;
          that.setData({ spaceType: that.data.spaceType })
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          app.globalData.loadFail()
        }
      })
    },
    toIndex(){
      app.globalData.toIndex()
    },
    clickcontrol(e) {//回到定位的
      let mpCtx = wx.createMapContext("map");
      mpCtx.moveToLocation();
      
    },
    getCenterPoint(callback){
      let that = this;
      var mapCtx = wx.createMapContext('map')
      mapCtx.getCenterLocation({
        success: function (res) {
          console.log('res', res)
          that.data.params.latitude = res.latitude;
          that.data.params.longitude = res.longitude;
          that.setData({
            params: that.data.params,
          })
          if (callback){
            callback
          }
        }
      })
    },
    regionchange(e) {
      console.log('===regionchange===',e)
      if (e.type == 'end') {
        if (e.causedBy =='scale'){
          console.log('====scale====')
        } else if(e.causedBy == 'drag') {
          console.log('====drag====');
          this.getCenterPoint(this.getData(this.data.params));
          }else{
          console.log('====all====');
          this.getCenterPoint(this.getData(this.data.params));
          }
      }
    },
    markertap(e) {
      console.log(e.markerId)
      this.toSpaceDetailMap(e.markerId);
    },
    controltap(e) {
      console.log(e)
    },
    hiddenProInfo(e){
      console.log(e)
      this.setData({spaceDetail:null})
    },
    /* 点击分类大项 */
    bindTypeItem: function (event) {
      let onId;
      if (event && event.currentTarget){
        onId = event.currentTarget.dataset.type.id
        console.log('====bindTypeItem currentTarget====',onId)
      } else if (event && !event.currentTarget){
        onId = event
        console.log('====bindTypeItem event====',onId)
      }
      console.log(event)
      console.log("this.data.setting.platformSetting",this.data.setting)
      for (let i = 0; i < this.data.setting.platformSetting.categories.length; i++) {
        if (this.data.setting.platformSetting.categories[i].id == onId ) {
          this.data.setting.platformSetting.categories[i].active = true
          console.log(this.data.setting.platformSetting.defaultColor)
          this.data.setting.platformSetting.categories[i].colorAtive =this.data.setting.platformSetting.defaultColor;
        }
        else {
          this.data.setting.platformSetting.categories[i].active = false
          this.data.setting.platformSetting.categories[i].colorAtive = '#888';
        }
      }
      this.setData({
        setting: this.data.setting,
      })

      this.data.listPage.page = 1
      this.data.params.page = 1

      if (onId == "all") {

        this.data.params.categoryId = ''
        this.getData(this.params)
      } else {
        this.data.params.categoryId = onId
        this.getData(this.data.params)
      }
    },
    /* 获取数据 */
    getData: function (param) {
      var that = this
      let params=Object.assign({},param,{
          pageObjectId: that.data.receiveData.pageObjectId||0,
          pageObjectType: that.data.receiveData.pageObjectType||0
      })
      let la1 = that.data.localPoint.latitude
      let lo1 = that.data.localPoint.longitude
      var customIndex = app.globalData.AddClientUrl("/wx_find_asset_space.html", params)
      app.globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: app.globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log(res.data)
          that.data.listPage.pageSize = res.data.relateObj.pageSize
          that.data.listPage.curPage = res.data.relateObj.curPage
          that.data.listPage.totalSize = res.data.relateObj.totalSize
          let dataArr = that.data.spaceData
          let tagArray=[];
          if (param.page==1) {
            dataArr = []
          }
          if (!res.data.relateObj.result || res.data.relateObj.result.length == 0) {
            that.setData({ spaceData: null })
          } else {
            if (dataArr == null) { dataArr = [] }
            dataArr = dataArr.concat(res.data.relateObj.result)
            for (let i = 0; i < dataArr.length; i++) {
              if (dataArr[i].tags && dataArr[i].tags!=''){
                tagArray = dataArr[i].tags.slice(1,-1).split("][")
                dataArr[i].tagArray = tagArray;
              }
            }
            for (let i = 0; i < dataArr.length; i++) {
              if (dataArr[i].latitude && dataArr[i].latitude != 0 && dataArr[i].longitude && dataArr[i].longitude != 0) {
                dataArr[i].distance = app.globalData.getDistance(la1, lo1, dataArr[i].latitude, dataArr[i].longitude)
              }
            }
            that.setData({ spaceData: dataArr })
          }
          that.setData({ markers: that.data.spaceData })
          let conut=0;
          if (that.data.markers) {
            for (let i = 0; i < that.data.markers.length; i++) {
              if (that.data.markers[i].categoryIcon) {
                that.downProIcon(that.data.markers[i].categoryIcon,function(url){
                  conut++;
                  that.data.markers[i].iconPath = url;
                  that.data.markers[i].width=32;
                  that.data.markers[i].height = 32;
                  if (conut == that.data.markers.length) {
                    that.setData({ markers: that.data.markers })
                    console.log('==that.data.markersHave===', that.data.markers);
                  }
                })
              } else {
                conut++;
                that.data.markers[i].iconPath = '../../images/icon/mapItem.png';
                that.data.markers[i].width = 32;
                that.data.markers[i].height = 32;
                if (conut == that.data.markers.length) {
                  that.setData({ markers: that.data.markers })
                  console.log('==that.data.markers===', that.data.markers);
                }
              }
              
            }
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          app.globalData.loadFail()
        }
      })
    },
    downProIcon:function(url,callback){
      var _this = this;
      if (app.globalData.mapProIconArray[encodeURIComponent(url)]){
        console.log('已存在', encodeURIComponent(url))
        callback(app.globalData.mapProIconArray[encodeURIComponent(url)])
        return
      }
      wx.downloadFile({ 
        url: url.replace('http', 'https'),
        success: function (res) {
          console.log('下载图片',res)       
          if (res.statusCode == 200) {
            callback(res.tempFilePath);   
            app.globalData.mapProIconArray[encodeURIComponent(url)] = res.tempFilePath     
          }      
        }    
      })    
    },
    /* 查找商品 */
    getSearchSpaceName: function (params) {
      console.log("====getSearchSpaceName====", params)
      var that = this
      that.getData(params)
    },
    /* 商品显示方法 */
    bindSpaceshowWay: function () {
      if (this.data.SpaceshowWay == 1) {
        this.setData({ SpaceshowWay: 2 })
      } else{
        this.setData({ SpaceshowWay: 1 })
      }
    },
    // 定位
    toNavigate: function (e) {
      console.log("===toNavigate=====",e)
      let itemInfo = e.currentTarget.dataset.info;
      if(itemInfo){
          itemInfo=JSON.parse(itemInfo)
      }
      let latitude = itemInfo.latitude;
      let longitude = itemInfo.longitude;
      let name = itemInfo.name;
      let address = itemInfo.province + itemInfo.city + itemInfo.area + itemInfo.address;
      wx.openLocation({
        latitude: latitude,
        longitude: longitude,
        scale: 12,
        name: name,
        address: address
      })
    },
    tolinkUrl: function (e) {
      let linkUrl = e.currentTarget.dataset.link
      app.globalData.linkEvent(linkUrl)
    },
    toSpaceDetail: function (event) {
      console.log("--------toSpaceDetail------", event)
      console.log(event.currentTarget.dataset.info)
      var info = event.currentTarget.dataset.info;
      if(info){
          info=JSON.parse(info)
      }
      let id;
      if (info.spaceId){
        id = info.spaceId
      }else{
        id = info.id
      }
      wx.navigateTo({
        url: '../spaceDetail/index?id=' + id ,
      })
    },
    toSpaceDetailMap: function (id) {
      console.log("--------toSpaceDetailMap------")
      console.log(id)
      var param = { spaceId: id}
      let customIndex = app.globalData.AddClientUrl("/space_detail.html", param)

      var that = this
      that.setData({
        spaceDetail: null
      })
      wx.request({
        url: customIndex.url,
        header: app.globalData.header,
        success: function (res) {
          console.log(res.data)
          that.setData({
            spaceDetail: res.data
          })
        },
        fail: function (res) {
          console.log("fail")
          app.globalData.loadFail()
        },
        complete: function () {
        },
      })
    },
    initSetting(){
      this.setData({ setting: app.globalData.setting })
      for (let i = 0; i < this.data.setting.platformSetting.categories.length; i++) {
        this.data.setting.platformSetting.categories[i].colorAtive = '#888';
      }
      this.data.setting.platformSetting.categories[0].colorAtive = this.data.setting.platformSetting.defaultColor;
      this.setData({
        setting: this.data.setting,
      })
  },
    pullDownRefreshFun: function () {

      this.data.params.name = ""
      this.data.listPage.page = 1
      this.data.params.page = 1
      this.getData(this.data.params)

    },
    reachBottomFun: function () {
      var that = this
      if (that.data.listPage.totalSize > that.data.listPage.curPage * that.data.listPage.pageSize) {
        that.data.listPage.page++
        that.data.params.page++
        that.getData(that.data.params);
      }
    },
  }
})
export default global['__wxComponents']['partials/space_list/index']
</script>
<style platform="mp-weixin">
.typeSearchContainer{
  position:fixed;
  z-index:111;
  width: 100%;
  height: 90rpx;
  border-bottom:1rpx solid #eee;
}
.search_input_bg{
  padding: 20rpx;
  background: #fff;
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing:border-box;
}
.search_input{
  border-radius: 60rpx;
  height: 60rpx;
  background: #eee;
  width: 100%;
  padding: 15rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between
}
.search_input_left{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search_input .input{
  font-size: 24rpx;
  margin-left: 20rpx;
}
.input_img{
  width: 35rpx;
  height: 35rpx;
}
.empty_button{
  color: #fff;
  background: #999;
  width: 30rpx;
  height: 30rpx;
  font-size: 22rpx;
  border-radius: 30rpx;
  line-height: 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
  opacity: 0.8;
  cursor: pointer;
}
.typeSearch{
  background: #fff;
  display: flex;
  flex-direction: row;
  border-bottom: 2rpx solid #ccc;
  box-sizing: border-box;
  justify-content: space-between;
  color:#888;
}
.typeSearch > view{
  width: 25%;
  box-sizing: border-box;
  font-size: small;
  position: relative;
}
.item_icon{
  position: absolute;
  right: 20rpx;
  top: 50%;
  margin-top: -20rpx;
  width: 40rpx;
  height: 40rpx
}
.typeSearch .item_icon image{
  width: 40rpx;
  height: 40rpx;
}
.border_left{
  position: absolute;
  left: 0;
  border-left: 1rpx solid #ccc;
  top: 20%;
  bottom: 20%;
}
.typeSearch image{
  height:40rpx;
  width: 40rpx;
}
.typeSearch_view_height{
  height: 90rpx;
  background: #f1f1f1;
}
/* 没有商品时 */
.nospace{
  position: absolute;
  top: 170rpx;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: x-small;
}
.nospace image{
  width: 30%;
}
.active{
border-bottom: 2rpx solid #FE5722;
}
.mapItem{
  position: relative;
  z-index: 1;
}
.bottom_tap{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 120rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding:0 60rpx;
  margin-bottom:20rpx;
  box-sizing: border-box;
  z-index: 2;
}
.return_index{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 28rpx;
  border-radius: 50rpx;
  width: 50rpx;
  height: 50rpx;
  padding: 20rpx;
}
.return_index_img{
  width: 40rpx;
  height: 40rpx;
  background-blend-mode:lighten;
  background-size:cover;
  }
 .location{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 28rpx;
  border-radius: 50rpx;
  width: 50rpx;
  height: 50rpx;
  padding: 20rpx;
 }
 .location_img{
  width: 50rpx;
  height: 50rpx;
  background-blend-mode:lighten;
  background-size:cover;
  }
  .space_data{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 220rpx;
    width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    position:fixed;
    bottom:150rpx;
    z-index: 2;
  } 
  .space_info{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 220rpx;
    width: 100%;
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
  }
  .space_info_left{
    border-radius: 20rpx;
    margin-right: 20rpx;
    width: 150rpx;
    height: 150rpx
  }
  .space_info_center{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 26rpx;
    width: 320rpx;
    height:150rpx;
    color: #ccc;
    margin-top:6rpx;
  }
  .space_info_name{
    font-weight: bold;
    font-size: 30rpx;
    color: #000;
    margin-bottom:10rpx;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
  }
  .space_info_service_time{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom:10rpx;
  }
  .space_info_service_addr{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom:10rpx;
  }
  .space_info_service_addr_img{
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx
  }
  .space_info_service_time_img{
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx
  }
  .space_info_right{
    margin-left: 40rpx;
    width: 100rpx;
    height: 150rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
  }
  .line{
    width: 2rpx;
    background: #888;
    height: 150rpx;
  }
  /* tab */
  .tab-h{
    height: 68rpx;
    width: 100%; 
    box-sizing: border-box;
    overflow: hidden;
    line-height: 68rpx;
    font-size: 24rpx; 
    white-space: nowrap;
   }
     .tab-item{
     margin-left: 60rpx;
     height: 60rpx;
     display: inline-block;
   }
    .tab-item:first-child{
     margin-left: 40rpx;
     height: 60rpx;
     display: inline-block;
   }
   /* 列表样式 */
   .space_page_container2{
      background: #fff;
      width: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
    }
   .space_item{
     display: flex;
     flex-direction: column;
     padding: 20rpx;
     border-bottom: 1rpx solid #eee
   }
   .space_item_head{
     display: flex;
     flex-direction: row;
     align-items: flex-end;
     margin-bottom: 20rpx;
   }
   .space_item_logo{
     width: 60rpx;
     height: 60rpx;
     margin-right: 20rpx;
   }
   .space_item_name{
    font-size:32rpx;
    font-weight:bold;
    color:#444;
   }
   .space_item_first_img{
     height: 300rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
   }
   .space_item_banner{
     height: 300rpx;
     width: 100%;
     border-radius:16rpx;
   }
   .space_item_location{
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     margin-top:20rpx;
   }
   .space_item_location_left{
     display: flex;
     flex-direction: row;
     align-items: center;
   }
   .space_item_addr_icon{
     height: 50rpx;
     width: 50rpx;
     margin-right: 12rpx;
   }
   .space_item_place{
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     font-size: 24rpx;
     color: #999;
     height: 76rpx;
   }
   .space_navigation{
     display: flex;
     flex-direction: row;
     align-items: center;
     height: 50rpx;
     border-radius: 12rpx;
     font-size: 24rpx;
     color: #fff;
     width:100rpx;
     padding: 0 10rpx
   }
   .space_navigation_icon{
     width: 26rpx;
     height: 26rpx;
     margin-right: 10rpx;
   }
   .distance{
     padding:0 10rpx;
     border-radius:10rpx;
     margin:0 6rpx;
   }
</style>